<template>
    <van-skeleton title :row="3" v-if="stutas" />
    <div v-else>
        <van-nav-bar title="暴走电商" fixed />
        <div style="height: 45px;"></div>
        <van-tabs v-model:active="active">
            <van-tab title="推荐">
                <!-- 引入公共组件搜索 -->
                <Search></Search>
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in images" :key="image">
                        <img :src="image" style="width: 100%;height: 200px;" />
                    </van-swipe-item>
                </van-swipe>

                <van-grid :border="false" :column-num="4">
                    <van-grid-item>
                        <img src="../img/作业1-03.jpg" alt="">
                        <div></div>
                        <span>搜索商品</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="../img/作业2-03.jpg" alt="">
                        <div></div>
                        <span>商品分类</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="../img/作业3-03.jpg" alt="">
                        <div></div>
                        <span>餐饮服务</span>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="../img/作业1-03.jpg" alt="">
                        <div></div>
                        <span>行业资讯</span>
                    </van-grid-item>
                    <div style="color: coral;">新品上线 小米SU7最新上线 </div>

                </van-grid>

                <div style="width: 100%;height: 80px; margin: 50px;">
                    <h4 style="background-color: pink; width: 50px;">倒计时</h4>
                    <h4 style="float: left; margin-left: 5px; background-color: bisque; ">10:</h4>
                    <h4 style="float: left; margin-left: 10px; background-color: bisque;">01:</h4>
                    <h4 style="float: left; margin-left: 10px; background-color: bisque;">52</h4>
                </div>

                <div class="pbl">
                    <div style="width: 100px;height: 100px;background-color: antiquewhite;"><img src="../img/作业1-03.jpg"
                            alt="" style="width: 100px;height: 50px;">￥1260 </div>
                    <div style="width: 100px;height: 150px;background-color: antiquewhite;"><img src="../img/作业1-03.jpg"
                            alt="" style="width: 100px;height: 125px;">￥1260 </div>
                    <div style="width: 100px;height: 200px;background-color: antiquewhite;"><img src="../img/作业1-03.jpg"
                            alt="" style="width: 100px;height: 160px;">￥1260 </div>
                    <div style="width: 100px;height: 150px;background-color: antiquewhite;"><img src="../img/作业1-03.jpg"
                            alt="" style="width: 60px;height: 80px;">￥1260 </div>
                    <div style="width: 100px;height: 150px;background-color: antiquewhite;"><img src="../img/作业4-09.jpg"
                            alt="" style="width: 100px;height: 100px;">￥1260 </div>
                    <div style="width: 100px;height: 160px;background-color: antiquewhite;"><img src="../img/作业4-15.jpg"
                            alt="" style="width: 100px;height: 135px;">￥1260 </div>

                </div>
            </van-tab>
            <van-tab title="音频">内容 2</van-tab>
            <van-tab title="服装">内容 3</van-tab>
            <van-tab title="美食">内容 4</van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
];
let stutas = ref(true)
setTimeout(() => {
    stutas.value = false
}, 2000);
import { ref } from "vue";
import { catitemsApi, floordataApi } from "@/api/api";
import Search from '@/components/search.vue'
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航', res);
    catitems.value = res.data.message
})
let floordata = ref([])
floordataApi().then(res => {
    console.log('楼层', res);
    floordata.value = res.data.message
})

</script>

<style>
.pbl {
    div {
        display: inline-block;
        column-count: 2;
        column-gap: 30px;
        margin-left: 50px;
        margin-top: 20px;
    }
}
</style>